// pages/index/index.js
const api = require("../../utils/api");
const { validateTextInput } = require("../../utils/validator");
const prompts = require("../../constants/prompts");

Page({
  /**
   * 页面的初始数据
   */
  data: {
    inputText: "", // 用户输入的文字
    imageType: "general", // 默认图片类型为"通用"
    isGenerating: false, // 是否正在生成图片
    generatedImageUrl: "", // 生成的图片URL
    errorMessage: "", // 错误信息
    personPrompts: prompts.person, // 人物提示词
    animePrompts: prompts.anime, // 动漫提示词
    generalPrompts: prompts.general, // 通用提示词
    width: 0,
    height: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    // 初始化云环境
    if (!wx.cloud) {
      console.error("请使用 2.2.3 或以上的基础库以使用云能力");
    } else {
      wx.cloud.init({
        env: "cloud1-7gxbg8fg3837e749", // 默认环境
        traceUser: true,
      });
    }
  },

  /**
   * 文本输入变化时触发
   */
  onInputChange: function (e) {
    this.setData({
      inputText: e.detail.value,
      errorMessage: "", // 清除错误信息
    });
  },

  /**
   * 图片类型点击时触发
   */
  onTypeOptionTap: function (e) {
    const type = e.currentTarget.dataset.type;
    this.setData({
      imageType: type,
    });
  },

  /**
   * 兼容旧的类型选择组件方法
   */
  onTypeChange: function (e) {
    this.setData({
      imageType: e.detail.value,
    });
  },

  /**
   * 选择提示词案例时触发
   */
  onPromptSelect: function (e) {
    const prompt = e.currentTarget.dataset.prompt || e.detail.prompt;
    this.setData({
      inputText: prompt,
      errorMessage: "",
    });
  },

  /**
   * 生成图片
   */
  generateImage: function () {
    // 校验输入
    const validation = validateTextInput(this.data.inputText);
    if (!validation.valid) {
      this.setData({
        errorMessage: validation.message,
      });
      return;
    }

    // 设置加载状态
    this.setData({
      isGenerating: true,
      errorMessage: "",
      generatedImageUrl: "", // 清空之前的图片
    });

    wx.showLoading({
      title: "生成图片中...",
      mask: true,
    });

    // 调用API生成图片
    api
      .generateImage(this.data.inputText, this.data.imageType)
      .then((result) => {
        console.log("生成图片成功:", result);
        wx.hideLoading();

        // 确保图片URL可访问
        if (!result.imageUrl) {
          throw new Error("未获取到图片链接");
        }

        // 预加载图片
        this.preloadImage(result.imageUrl)
          .then((res) => {
            const query = wx.createSelectorQuery();
            query
              .select("#result-image-container")
              .boundingClientRect((rect) => {
                if (res) {
                  const ratio = res.width / res.height;
                  // 更新到页面数据
                  this.setData({
                    width: rect.width,
                    height: rect.width / ratio,
                  });
                }
              })
              .exec();

            this.setData({
              generatedImageUrl: result.imageUrl,
              isGenerating: false,
            });

            // 滚动到结果区域
            wx.createSelectorQuery()
              .select(".result-section")
              .boundingClientRect((rect) => {
                if (rect) {
                  wx.pageScrollTo({
                    scrollTop: rect.top,
                    duration: 300,
                  });
                }
              })
              .exec();
          })
          .catch((error) => {
            console.error("图片加载失败:", error);
            this.setData({
              errorMessage: "图片加载失败，请重试",
              isGenerating: false,
            });
          });
      })
      .catch((error) => {
        console.error("生成图片失败:", error);
        wx.hideLoading();

        wx.showToast({
          title: "生成失败",
          icon: "error",
          duration: 2000,
        });

        this.setData({
          errorMessage:
            typeof error === "string"
              ? error
              : error.message || "生成图片失败，请重试",
          isGenerating: false,
        });
      });
  },

  onImageLoad: function (e) {
    // const { width, height } = e.detail;
    // const ratio = width / height;
    // this.setData({
    //   width: 750, // 设置固定宽度（如屏幕宽度）
    //   height: 750 / ratio, // 按比例计算高度
    // });
  },

  /**
   * 预加载图片
   */
  preloadImage: function (url) {
    return new Promise((resolve, reject) => {
      wx.getImageInfo({
        src: url,
        success: function (res) {
          resolve(res);
        },
        fail: function (err) {
          reject(err);
        },
      });
    });
  },

  /**
   * 图片加载错误处理
   */
  onImageError: function (e) {
    console.error("图片加载错误:", e);
    this.setData({
      errorMessage: "图片加载失败，请重试生成",
    });
  },

  /**
   * 预览图片
   */
  previewImage: function () {
    if (this.data.generatedImageUrl) {
      wx.previewImage({
        urls: [this.data.generatedImageUrl],
      });
    }
  },

  /**
   * 保存图片到相册
   */
  saveImage: function () {
    if (!this.data.generatedImageUrl) {
      return;
    }

    wx.showLoading({
      title: "保存中...",
    });

    wx.downloadFile({
      url: this.data.generatedImageUrl,
      success: (res) => {
        if (res.statusCode === 200) {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              wx.hideLoading();
              wx.showToast({
                title: "保存成功",
                icon: "success",
              });
            },
            fail: (err) => {
              wx.hideLoading();
              wx.showToast({
                title: "保存失败",
                icon: "none",
              });
              console.error("保存失败", err);
            },
          });
        } else {
          wx.hideLoading();
          wx.showToast({
            title: "下载失败",
            icon: "none",
          });
        }
      },
      fail: (err) => {
        wx.hideLoading();
        wx.showToast({
          title: "下载失败",
          icon: "none",
        });
        console.error("下载失败", err);
      },
    });
  },
});
